<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title>ajax</title>
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			min-height: 400px;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>


	<div class="profile">
		<p><span>姓名：</span><span id="sname"></span></p>
		<p><span>年龄：</span><span id="sage"></span></p>
		<p><span>朋友：</span><span id="sfriends"></span></p>
		
	</div>


	<div id="">
		<select>
			<option>广西</option>
			<option>广东</option>
		</select>省

		<select>
			<option>柳州</option>
			<option>百色</option>
			<option>桂平</option>
			<option>玉林</option>
		</select>市

		<select>
			<option >城中</option>
			<option  >鱼峰</option>
			<option >柳南</option>
			<option>柳北</option>
			<option>柳江</option>
		</select>区
	</div>
	





	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		
		$.get('data/student.json',function(res){

			// var student = JSON.parse(res);
			// console.log(student.name);
			//让姓名在html里面显示
			$('#sname').text(res.name);
			$('#sage').text(res.age);

			
		    var fname='';

            for(var i=0;i<res.friends.length;i++){

            	fname += res.friends[i].name+" ";
            }

            $('#sfriends').text(fname);

           







		});


	</script>

</body>
</html>